<template>
    <div>
        <h1>{{ p1 }}</h1>
        <button @click="p1++">点击p1++</button>
        <hr>
        <h1>{{ p2 }}</h1>
        <button @click="p2+=2">点击p2+=2</button>
        <br>
        <h1>监听一个对象数据的变化{{ p3.age.num }}</h1>
        <button @click="p3.age.num++">点击p3改变一个对象的年龄++</button>
    </div>
    
</template>
<script>
import {ref,watch,reactive} from 'vue'

export default({
    setup(){
       
       const p1 = ref(0)
       const p2 = ref(1)
       const p3 = reactive({name:'马云',age:{num:1}})
       //二：监听多个ref数据变化
       watch([p1,p2],(newVal,oldVal)=>{
             console.log(newVal,oldVal)

       })

       //一：监听一个ref数据变化 
    //    watch(p1,(newVal,oldVal)=>{
    //          console.log(newVal,oldVal)//oldVal上一次结果，newVal最新一次结果
    //    })
       //三：监听整个reactive数据的变化
    //    只能监听新的数据，变化之前的数据监听不到
        // watch(p3,(newVal,oldVal)=>{
        //     console.log(newVal,oldVal)
        // })
        //四：监听某一个reactive数据中某一个值的变化
        watch(()=>p3.age.num,(newVal,oldVal)=>{
            console.log(newVal,oldVal)
        })
        return{p1,p2,p3}

    }
})



</script>
<style>
</style>